<template>
  <div class="containers h-100vh w-100vw flex bg-#f6f6f6">
    <!-- 头部检索 -->
    <div class="bg bg-#039595">
      <div class="header w-100%" :style="{
        minHeight: queryParms.searchType ? '' : '150px'
      }">
        <div class="logo">
          <img src="@/assets/imgs/logo.png" alt="" class="m-l-20px m-r-5px h-25px w-30px"/>
          <span>新闻传播中心出版社</span>
        </div>
        <div class="retrievalPart w-50% flex" :style="{
          minHeight: queryParms.searchType ? '200px' : '150px'
        }">
          <div class="searchMethod h-50px w-100% cursor-pointer text-#fff">
            <h2 class="h-100% text-center">{{
                advParams.type == 1 ? '检索' : '高级检索'
              }}<span class="m-l-10px text-15px" @click="() => (
                advParams.type ==1
                  ? (advParams.type = 2)
                  : (advParams.type = 1)
              )
                ">{{ advParams.type == 2 ? '返回' : '高级检索' }}>></span></h2>
          </div>
          <div class="retrieval w-100% flex justify-around">
            <!-- 标准检索 -->
            <el-input v-if="advParams.type == 1" v-model="advParams.keyword"
                      placeholder="请输入检索内容"
                      :suffix-icon="Camera"
                      class="input-with-select input-with-suffix-icon"
                      @input="isSearch = false"
                      size="20px">
              <template #prepend>
                <select v-model="retrievalType" placeholder="Select"
                        class="searchSelect h-45px border-none"
                        style="width: 85px; padding-left: 8px">
                  <option v-for="item in retrievalOptions" :key="item.value" :label="item.label"
                          :value="item.value">
                  </option>
                </select>
              </template>
              <template #append>
                  <el-button :icon="Search" class="searchbtn"
                             @click="() => (search(), (isSearch = true))"/>
              </template>
            </el-input>
            <!-- 普通检索 -->
            <el-form v-else :model="queryParms" class="form m-t-10px box-border w-100%">
              <!--              <el-form-item class="form_item box-border p-10px">-->
              <!--                <el-row :gutter="10">-->
              <!--                  <el-col :span="5">-->
              <!--                    <el-select v-model="selectType" placeholder="请选择检索类型" :disabled="true">-->
              <!--                      <el-option style="padding: 0 32px 0 20px" label="出版时间" :value="selectType"/>-->
              <!--                    </el-select>-->
              <!--                  </el-col>-->
              <!--                  &lt;!&ndash; 普通检索 &ndash;&gt;-->
              <!--                  <el-col :span="15">-->
              <!--                    <el-date-picker-->
              <!--                      v-model="publicationTime"-->
              <!--                      type="daterange"-->
              <!--                      range-separator="To"-->
              <!--                      start-placeholder="请输入起始时间"-->
              <!--                      end-placeholder="请输入终止时间"-->
              <!--                      style="width: 96.5%"-->
              <!--                    />-->
              <!--                  </el-col>-->
              <!--                  <el-col :span="3">-->
              <!--                    <div class="box-border flex"></div>-->
              <!--                  </el-col>-->
              <!--                </el-row>-->
              <!--              </el-form-item>-->
              <el-form-item class="form_item box-border p-10px"
                            v-for="(its, inds) in advField"
                            :key="inds">
                <el-row :gutter="10" v-if="inds == 0">
                  <el-col :span="5">
                    <el-select v-model="advField[inds]"
                               @change="(value) => selectField(value, inds)" placeholder="请选择检索类型"
                               clearable>
                      <el-option style="padding: 0 32px 0 20px" :label="item.fieldDesc"
                                 :value="item.fieldName"
                                 v-for="item in defaultLib.advField" :key="item"/>
                    </el-select>
                  </el-col>
                  <!-- 高级检索 -->
                  <el-col :span="15" v-if="fieldType[inds] == 'string'">
                    <el-input
                      v-model="advValue[inds]"
                      placeholder="请输入检索内容"
                      clearable
                      @input="isSearch = false"
                    />
                  </el-col>
                  <el-col :span="15"
                          v-if="fieldType[inds] == 'date' || fieldType[inds] == 'datetime'">
                    <el-date-picker
                      v-model="advValue[inds]"
                      type="daterange"
                      range-separator="To"
                      start-placeholder="请输入起始时间"
                      end-placeholder="请输入终止时间"
                      style="width: 96.5%"
                      format="YYYY/MM/DD"
                      value-format="YYYY/MM/DD"
                    />
                  </el-col>
                  <!--                  同音查询：-->
                  <!--                  <el-switch v-model="queryParms.homo"></el-switch>-->
                  <!--                  <el-popover placement="top-start" effect="dark" :width="180" trigger="hover"-->
                  <!--                              content="同音词查询功能只支持“标题”或“名称”查询">-->
                  <!--                    <template #reference>-->
                  <!--                      <el-icon>-->
                  <!--                        <QuestionFilled/>-->
                  <!--                      </el-icon>-->
                  <!--                    </template>-->
                  <!--                  </el-popover>-->
                  <el-col :span="3">
                    <div class="box-border flex">
                      <el-button type="primary" class="addbtn" @click="addCondition">+
                      </el-button>
                      <el-button type="primary" v-if="inds>0" class="addbtn"
                                 @click="delCondition(inds)">-
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="10" v-else>
                  <el-col :span="5">
                    <el-select v-model="connect[inds-1]" placeholder="请选择检索条件" clearable>
                      <el-option style="padding: 0 32px 0 20px" :label="item.label"
                                 :value="item.value"
                                 v-for="item in conditionOptions2" :key="item"/>
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <el-select v-model="advField[inds]"
                               @change="(value) => selectField(value, inds)" placeholder="请选择检索类型"
                               clearable>
                      <el-option style="padding: 0 32px 0 20px" :label="item.fieldDesc"
                                 :value="item.fieldName"
                                 v-for="item in defaultLib.advField" :key="item"/>
                    </el-select>
                  </el-col>
                  <!-- 标准检索 -->
                  <el-col :span="10" v-if="fieldType[inds] == 'string'">
                    <el-input
                      v-model="advValue[inds]"
                      placeholder="请输入检索内容"
                      clearable
                      @input="isSearch = false"
                    />
                  </el-col>
                  <el-col :span="10"
                          v-if="fieldType[inds] == 'date' || fieldType[inds] == 'datetime'">
                    <el-date-picker
                      v-model="advValue[inds]"
                      type="daterange"
                      range-separator="To"
                      start-placeholder="请输入起始时间"
                      end-placeholder="请输入终止时间"
                      style="width: 96.5%"
                      format="YYYY/MM/DD"
                      value-format="YYYY/MM/DD"
                    />
                  </el-col>
                  <el-col :span="3">
                    <div class="box-border flex">
                      <el-button type="primary" v-if="
                        inds + 1 == queryParms.advancedSearches.length &&
                        queryParms.advancedSearches.length <= 4
                      " class="addbtn" @click="addCondition">+
                      </el-button>
                      <el-button type="primary" v-if="inds != 0" class="addbtn"
                                 @click="delCondition(inds)">-
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <div class="searchBtn h-50px flex items-center justify-center"
                 v-show="advParams.type == 2">
              <el-button type="primary" @click="() => ((isSearch = true), search())" class="p-10px">
                检索
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 库类型 -->
    <div class="typeList box-border h-50px w-100% bg-#207073">
      <ul class="m-0px h-100% flex items-center justify-evenly">
        <li
          class="box-border h-100% w-80px flex cursor-pointer items-center justify-center text-14px text-#fff"
          v-for="(item, index) in library" :key="index" @click="activeTab(item)"
          :style="{ backgroundColor: defaultLib.id == item.id ? '#039595' : '' }">
          <p> {{ item.name }} </p>
          <span>{{ item.total }}</span>
        </li>
      </ul>
    </div>
    <!-- 排序 -->
    <div
      class="sort box-border flex items-center justify-between bg-#fff p-l-25px p-r-25px text-15px">
      <div class="retrievalValue w-15%">全文检索：{{
          isSearch
            ? queryParms.searchType == 0
              ? queryParms.keyWord
              : queryParms.advancedSearches.map((it) => it.keyWord).join('、')
            : ''
        }}
      </div>
      <div class="sortList flex flex-1 items-center">
        排序：
        <div @click="order(item.fieldName,item.sortMethod)"
             :class="['item', activeSort == item.fieldName ? 'activeSort' : '']"
             v-for="item in sort">{{ item.name }}
          <el-icon v-if="item.sortMethod == 'asc'">
            <CaretTop/>
          </el-icon>
          <el-icon v-else>
            <CaretBottom/>
          </el-icon>
        </div>
      </div>
    </div>
    <!-- 内容和分类 -->
    <div class="contents w-100% flex">
      <!-- 树形分类 -->
      <div class="classification" v-loading="treeLoading" element-loading-text="加载中...">
        <el-tree ref="treeRef" v-for="nav in navs" :default-expanded-keys="defaultNavNode"
                 :check-on-click-node="false" :key="nav" :data="nav.tree" node-key="id" :props="{
          label: 'name',
          children: 'children'
        }" show-checkbox
                 @check="(data, checked, indeterminate) => handleCheckChange(data, checked, indeterminate,nav.fieldName)"
                 :render-content="renderContent"/>
      </div>
      <!-- 检索结果列表 -->
      <div class="results h-100% flex items-center justify-between" v-loading="loadings"
           element-loading-text="加载中...">
        <div class="searchResults w-100%" v-if="dataList.length !== 0">
          <!--数据列表-->
          <Book v-if="defaultLib.id == 42 && dataList.length > 0" :data="dataList" :keyword="advParams.keyword"/>

          <PictureList v-if="defaultLib.id == 1000001 && dataList.length > 0" :data="dataList" :keyword="advParams.keyword"/>
        </div>
        <div v-else>
          <el-empty description="暂无数据..."/>
        </div>
        <div class="paging">
          <el-pagination background :page-size="queryParms.size" layout="prev, pager, next"
                         :total="total"
                         v-model:current-page="queryParms.page" next-text="下一页 >" prev-text="< 上一页"
                         @current-change="handleCurrentChange"/>
        </div>
      </div>
    </div>
  </div>
  <SearchImage ref="searchImageRef" @success="searchImage"></SearchImage>
</template>

<script setup lang="ts">
import 'video.js/dist/video-js.css'
import {onMounted, reactive, toRefs} from 'vue'
import {Camera, Search} from '@element-plus/icons-vue'
import * as AdvApi from '@/api/adv/index'
import ICON from '@/assets/imgs/ICON.png'
import Book from '@/views/adv/BookList.vue'
import PictureList from '@/views/adv/PictureList.vue'
import SearchImage from '@/views/adv/SearchImage.vue'

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const sort = ref([])

const searchImageRef = ref()

const advParams = ref({
  type: 1,
  keyword: undefined,
  metaId: undefined,
  navigation: {},
  advField: undefined,
  fieldType: undefined,
  connect: undefined,
  advValue: undefined,
  features: undefined,
  sort: {},
  libType: 1,
  pageNo: 1,
  pageSize: 10
})

const advField = ref([])
const fieldType = ref([])
const advValue = ref([])
const connect = ref([])

// 数据定义
const data = reactive({
  isSearch: false, //是否是搜索
  retrievalType: 0, //标准检索条件
  retrievalOptions: [
    {value: 0, label: '全文检索'},
    {value: 1, label: '二次检索'}
  ], //标准检索下拉
  total: 0, //检索列表内容总数
  treeLoading: false, //树形分类loading
  queryParms: {
    keyWord: '', //标准检索关键字
    keyWord1: '', //标准二次检索关键字
    searchType: 0, //检索条件类型 0标准 1高级
    ts: '', //发布时间排序 1正序 否则为倒序
    homo: false, //同音词是否开启
    pr: '', //价格排序 1正序 否则为倒序
    sort: [], //282 //分类类型
    advancedSearches: [
      {
        fnType: 'fnTitle', //普通检索类型
        keyWord: '', //普通检索关键字
        option: '1', //普通检索内容是否包含
        symbol: '==', // 普通检索条件 与为== 或为||
        startScope: 1, // 出版时间状态
        startTime: '', // 出版起始时间
        endTime: '' // 出版终止时间
      }
    ], //普通检索参数
    page: 1,
    size: 10,
    listSet: 1
  }, //列表请求参数
  sortDirection: 'desc', // 发布时间排序方向为升序：desc 倒序：asc
  sortPrice: 'asc', //价格排序方向为升序：asc，倒序desc
  activeSort: 'time', // 排序选项为发布时间：time  下载量:download 相关度：relevance 价格：price
  classificationList: [], //树形分类
  loadings: false, //检索列表loading
  dataList: [], //检索列表
  conditionOptions: [
    {label: '包含', value: 1},
    {label: '不包含', value: 2}
  ], //普通检索条件
  conditionOptions2: [
    {label: '与', value: 'AND'},
    {label: '或', value: 'OR'},
    {label: '非', value: 'NOT'}
  ], //普通检索条件
  typeOptions: [
    {
      label: '标题',
      value: 'fnTitle'
    },
    {
      label: '图书简介',
      value: 'fnBrief'
    },
    {
      label: '关键词',
      value: 'fnKeyword'
    },
    {
      label: '封面',
      value: 'fnCover'
    },
    {
      label: '人脸识别',
      value: 'fnPics'
    }
  ] //检索类型
})

// 数据响应式
let {
  retrievalType,
  retrievalOptions,
  retrievalValue,
  sortDirection,
  activeSort,
  classificationList,
  dataList,
  conditionOptions,
  conditionOptions2,
  typeOptions,
  queryParms,
  loadings,
  total,
  treeLoading,
  isSearch,
  valueSetList
} = toRefs(data)


// 初始化
onMounted(() => {
  window.document.querySelector(".el-input__suffix-inner").style.cursor = "pointer";
  window.document.querySelector(".el-input__suffix-inner").onclick = function (e) {
    e.stopPropagation(); //阻止事件冒泡
    searchImageRef.value.open()
  }
  index()
})
const library = ref([])
const defaultLib = ref({})
const sortMethod = ref('desc')

// 树形组件实例
const treeRef = ref()

// 左侧树结构导航
const navs = ref([])
const defaultNavNode = ref([])

const index = async () => {
  library.value = await AdvApi.index()
  defaultLib.value = library.value[0]
  defaultLib.value.sortField.forEach((res) => {
    const sortAttr = {
      name: res.fieldDesc,
      fieldName: res.fieldName,
      sortMethod: 'desc'
    }
    sort.value.push(sortAttr)
  })
  advField.value.push(defaultLib.value.advField[0].fieldName)
  fieldType.value.push(defaultLib.value.advField[0].fieldType)

  // activeSort.value = defaultLib.value.sortField[0].fieldName
  // sortMethod.value = activeSort.value + '.desc'
  await search()
}
const addCondition = () => {
  advField.value.push(defaultLib.value.advField[0].fieldName)
  fieldType.value.push('string')
  connect.value.push('AND')
}
const delCondition = (index) => {
  advField.value.splice(index, 1)
  fieldType.value.splice(index, 1)
  advValue.value.splice(index, 1)
  connect.value.splice(index - 1, 1)
}
const navigation = (navigations) => {
  console.log("nav:")
  console.log(navigations)
  navigations.forEach(async (navigation) => {

    const res = await AdvApi.classify(navigation.fieldName, navigation.classifyCode, advParams.value);
    navigation.tree = res
    defaultNavNode.value.splice(0, 0, res[0].id)
  })
  navs.value = navigations
}
const search = async () => {
  if (advParams.value.type == 2) {//高级检索
    for (let i = 0; i < advField.value.length; i++) {
      if (!advValue.value[i]) {
        message.error("请输入检索内容")
        return
      }
    }
    advParams.value.advField = advField
    advParams.value.advValue = advValue
    advParams.value.connect = connect
    advParams.value.fieldType = fieldType
  }
  advParams.value.metaId = defaultLib.value.id
  const res = await AdvApi.select(advParams.value);
  dataList.value = res.list
  total.value = res.total
  library.value = library.value.map(item => {
    if (item.id === defaultLib.value.id) {
      item.total = total.value
    }
    return item
  })
  navigation(defaultLib.value.navField)
}
// const sort = (fd) => {
//   activeSort.value = fd.fieldName
//   if (sortMethod.value == fd.fieldName + '.desc') {
//     sortMethod.value = fd.fieldName + '.asc'
//   } else {
//     sortMethod.value = fd.fieldName + '.desc'
//   }
// }

// 自定义内容渲染树形列表
const renderContent = (h, {node, data, store}) => {
  const {valueSetList} = data
  return h(
    'span',
    {
      class: `w-100% text-#fff m-l-4px treeContent ${node.level == 1 ? 'p-l-5px' : 'p-0px'}`,
      title: node.label
    },
    h('img', {
      class: `${node.level == 1 ? 'w-15px m-r-5px' : 'w-0px'}  align-middle`,
      src: ICON
    }),
    h(
      'span',
      {class: `${node.level == 1 ? 'text-15px' : 'text-14px'}`},
      `${node.label}${data.count !== null ? '（' + data.count + '）' : ''} ${node.level !== 1 && data.value ? '(' + data.value + ')' : ''
      }`
    )
  )
}
// 切换分页
const handleCurrentChange = async (val) => {
  advParams.value.pageNo = val
  await search()
}
const selectNav = ref([])
// 树形组件复选框选中事件
const handleCheckChange = async (data, checked, indeterminate, fieldName) => {
  selectNav.value.splice(0, 0, data.id)
  advParams.value.navigation[fieldName] = checked.checkedKeys
  const res = await AdvApi.select(advParams.value)
  dataList.value = res.list
}
const selectField = (value: any, index) => {
  const defaultAdv = defaultLib.value.advField
  defaultAdv.forEach((res) => {
    if (res.fieldName == value) {
      if (res.fieldType == 'date' || res.fieldType == 'datetime') {
        fieldType.value.splice(index, 1, res.fieldType)
      } else {
        fieldType.value.splice(index, 1, 'string')
      }
    }
  })
  console.log(fieldType.value)
  console.log(index)
}
const order = (field, order) => {
  sort.value.forEach((res) => {
    if (res.fieldName == field) {
      if (res.sortMethod == 'desc') {
        res.sortMethod = 'asc'
      } else {
        res.sortMethod = 'desc'
      }
    }
  })
  if (order == 'desc') {
    advParams.value.sort[field] = 'asc'
  } else {
    advParams.value.sort[field] = 'desc'
  }
  search()
}

const activeTab = async (item) => {
  defaultLib.value = item
  sort.value = []
  fieldType.value = []
  advField.value = []
  dataList.value = []
  defaultLib.value.sortField.forEach((res) => {
    const sortAttr = {
      name: res.fieldDesc,
      fieldName: res.fieldName,
      sortMethod: 'desc'
    }
    sort.value.push(sortAttr)
  })
  console.log(defaultLib.value)
  if (defaultLib.value.advField.length > 0) {
    advField.value.push(defaultLib.value.advField[0].fieldName)
  }
  if (defaultLib.value.advField.length > 0) {
    fieldType.value.push(defaultLib.value.advField[0].fieldType)
  }
  await search()
}

const searchImage = (features) => {
  advParams.value.features = features
  activeTab(library.value.filter(item =>item.id===1000001)[0])
  //search()
}
</script>

<style lang="scss" scoped>
::v-deep(.vjs-big-play-button) {
  top: calc((160px - 1.63332em) / 2);
  left: calc((250px - 3em) / 2);
}

// ::v-deep(.demo-image__error .image-slot) {
//   font-size: 30px;
// }

// ::v-deep(.demo-image__error .image-slot .el-icon) {
//   font-size: 30px;
// }

// ::v-deep(.demo-image__error .el-image) {
//   width: 100%;
//   height: 200px;
// }

.input-with-suffix-icon {
  ::v-deep(.el-input__suffix) {
    font-size: 20px;
  }
}

@font-face {
  font-family: HarmonyOS;
  src: url('@/assets/font/HarmonyOS_Sans_SC_Regular.ttf');
}

p {
  padding: 0;
  margin: 0;
}

*,
body,
html {
  font-family: HarmonyOS;
  user-select: none;
  /* 火狐 */
  /* 选中文字时避免出现蓝色背景 */
  user-select: none;
  /* webkit浏览器 */
  /* 选中文字时避免出现蓝色背景 */
  user-select: none;
  /* IE10 */
  /* 选中文字时避免出现蓝色背景 */
  user-select: none;
  /* 选中文字时避免出现蓝色背景 */
}

.containers {
  flex-direction: column;
  font-family: 'Microsoft YaHei';

  .header {
    position: relative;
    min-height: 200px;
    background: url('../../assets//imgs/headerbg.png') no-repeat;
    background-size: 100% 100%;

    .logo {
      position: absolute;
      top: 20px;
      left: 50;

      img {
        vertical-align: middle;
      }

      span {
        margin-top: 2px;
        font-size: 14px;
        color: #fff;
      }
    }

    .retrievalPart {
      height: 100%;
      margin: auto;
      flex-direction: column;
      justify-content: space-evenly;

      .searchMethod {
      }

      .retrieval {
        height: 100%;
        flex-direction: column;
        justify-content: space-evenly;

        .form {
          display: flex;
          overflow: auto;
          flex-direction: column;

          &::-webkit-scrollbar {
            width: 8px; // y轴滚动条宽度
            height: 5px; // x轴滚动条宽度
            background-color: #207073;
            border-radius: 5px;
          }

          &::-webkit-scrollbar-thumb {
            background-image: -webkit-gradient(linear,
              left bottom,
              left top,
              color-stop(0.44, #039595));
            border-radius: 5px;
            box-shadow: inset 0 0 6px #f4f4f5;
          }

          .form_item {
            padding: 0;
            margin: 0;
          }
        }

        .searchSelect {
          line-height: 45px;
          border-radius: 25px 0 0 25px;
          outline: none;
          box-shadow: 0 0 0 0.5px var(--el-input-border-color, var(--el-border-color)) inset;

          option {
            height: 45px;
            line-height: 45px;
          }
        }

        .retrievalInput {
          border-radius: 0;
        }

        :deep(.el-input-group__append) {
          width: 70px;
          font-size: 28px;
          color: #fff;
          background-color: #039595;
          border-radius: 0 25px 25px 0;
        }
      }
    }
  }

  .typeList {
    padding-left: 10px;

    ul {
      li {
        flex-direction: column;
        margin: 0 10px;

        p {
          margin: 0;
        }

        span {
          font-size: 13px;
        }
      }
    }
  }

  .sort {
    max-height: 40px;
    min-height: 40px;

    .retrievalValue {
    }

    .sortList {
      .item {
        display: flex;
        width: 100px;
        font-size: 14px;
        cursor: pointer;
        align-items: center;
      }

      .activeSort {
        font-weight: bold;
        color: #039595;
      }
    }
  }

  .contents {
    flex: 1;
    overflow-y: auto;

    .classification {
      width: 200px;
      overflow-y: auto;
      box-sizing: border-box;

      &::-webkit-scrollbar {
        width: 8px; // y轴滚动条宽度
        height: 5px; // x轴滚动条宽度
        background-color: #fff;
        border-radius: 5px;
      }

      &::-webkit-scrollbar-thumb {
        background-image: -webkit-gradient(linear,
          left bottom,
          left top,
          color-stop(0.44, rgb(60 186 146)));
        border-radius: 5px;
        box-shadow: inset 0 0 6px #f4f4f5;
        transition: 0.3s ease-in-out;
      }
    }

    .results {
      width: calc(100% - 240px);
      margin: 0 20px;
      flex-direction: column;

      .searchResults {
        height: calc(100% - 55px);
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 8px; // y轴滚动条宽度
          height: 5px; // x轴滚动条宽度
          background-color: #fff;
          border-radius: 5px;
        }

        &::-webkit-scrollbar-thumb {
          background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(60 186 146)));
          border-radius: 5px;
          box-shadow: inset 0 0 6px #f4f4f5;
          transition: 0.3s ease-in-out;
        }

        .results_item {
          margin: 10px 0;
          border-radius: 5px;
          box-shadow: 0 0 0 2px #f4f4f5;

          &:first-child {
            margin-top: 2;
          }

          img {
            margin: 0 15px;
            border-radius: 2px;
          }

          .index {
            font-weight: 500;
          }

          .results_content {
            flex-direction: column;
            justify-content: space-between;

            .title {
              font-size: 16px;
              // line-height: 25px;
              font-weight: 500;
            }

            .abstract {
              width: 99%;
              overflow: hidden;
              line-height: 20px;
              color: #999;
              text-overflow: ellipsis;
              white-space: nowrap;

              b {
                width: 50px;
                color: #000;
              }
            }

            b {
              font-size: 14px;
              font-weight: normal;
            }

            .author {
              display: flex;

              p {
                span {
                  text-decoration: underline;
                }
              }
            }

            .keywords {
              span {
                margin-right: 10px;
                // color: #4e6ef2;
                // text-decoration: underline;
              }
            }
          }
        }
      }
    }

    .paging {
      display: flex;
      width: 100%;
      height: 55px;
      background-color: #fff;
      border-radius: 5px;
      justify-content: center;
      align-items: center;
    }
  }
}

:deep(.el-checkbox--default) {
  height: 45px !important;
  line-height: 45px;
  color: #fff;
}

:deep(.el-checkbox__inner) {
  background-color: transparent;
}

:deep(.is-focus) {
  box-shadow: 0 0 0 0.5px var(--el-input-border-color, var(--el-border-color)) inset;
}

:deep(.el-pager) li {
  color: #4e6ef2;
}

:deep(.el-input__wrapper) li {
  box-shadow: 0 0 0 0.5px var(--el-input-border-color, var(--el-border-color)) inset !important;
}

:deep(.is-checked) .el-checkbox__inner {
  background-color: #039595;
}

:deep(.el-checkbox__inner)::after {
  border: 2px solid transparent;
  border-top: 0;
  border-left: 0;
}

:deep(.btn-next),
:deep(.btn-prev) {
  width: 70px;
  color: #4e6ef2;
  background-color: #f4f4f4 !important;
  border-radius: 5px;
}

:deep(.el-input-group__prepend) {
  padding: 0;
  border-radius: 25px 0 0 25px;
}

:deep(.el-row) {
  width: 100%;
  margin-bottom: 10px;
}

.popper {
  max-width: 500px !important;
}

.addbtn {
  width: 40px;
  margin-top: 2px;
  font-size: 20px;
  background-color: #207073;
}

.btn {
  width: 150px;
  height: 38px;
}

.searchBtn {
  display: flex;
  width: 100%;
  margin: auto;
  justify-content: center;
  align-items: center;

  .el-button {
    width: 70px;
    padding: 17px;
    box-sizing: border-box;

    &:first-child {
      background-color: #207073;
    }
  }
}

:deep(.el-tree-node__expand-icon) {
  display: none;
}

:deep(.is-focusable) {
  background-color: #039595;
}

:deep(.el-tree-node__children) {
  .is-expanded {
    max-height: 500px;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0; // y轴滚动条宽度
    }
  }

  .el-tree-node__content {
    .el-checkbox {
      // padding-left: 30px;
      display: inline-block;
      box-sizing: border-box;
    }
  }

  .el-tree-node {
    background-color: #207073;
  }
}

:deep(.el-tree-node__content) {
  height: 40px;

  .el-checkbox {
    display: none;
    margin-top: 5px;
    margin-right: 2px;
  }

  .treeContent {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &:hover {
    background-color: #039595 !important;
  }
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: transparent !important;
}

:deep(.el-input-group__append) {
  .searchbtn {
    padding: 0;
  }
}

:deep(.d-play-btn) {
  width: 45px;
  height: 45px;

  i {
    margin-left: 3px;
    font-size: 20px !important;
  }
}

:deep(.d-tool-item) {
  padding: 0 6px !important;
  box-sizing: border-box;

  i {
    font-size: 16px !important;
  }
}

:deep(.d-control-tool) {
  padding: 0 !important;
}

:deep(.d-player-state) {
  bottom: 50%;
  transform: translateY(40%);
}

.search-content {
  margin-left: 15px;
}

.el-tree-node__content {
  padding-left: 30px;
}
</style>
